<!DOCTYPE html>
<html>
<head>
	<title>css-display</title>
	<meta charset="utf-8">
	<style type="text/css">
		/** visibility:hidden，只是不显示，仍然占用空间; */
		h1.hidden{
			visibility: hidden;
		}
		div h2{
			background-color: pink;
			/*display: none;*/
		}

		div ul li{
			display: block;
			/*display*/: inline;
		}
		
	</style>
</head>
<body>
	<h1>This is a visible heading</h1>
	<h1 class="hidden">This is a hidden heading</h1>
	<p>注意,隐藏标题仍然占用空间.</p>

	<div>
		<h2>display or not</h2>
		<p>be hidden content</p>
	</div>

	<div>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>						
			<li>XML</li>
		</ul>
	</div>

	<div>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>						
			<li>XML</li>
		</ul>
	</div>

</body>
</html>